// src/components/feed.jsx
import {SparklesIcon} from "@heroicons/react/outline";
import Input from "./input";
import {BACKEND_BATH_URL} from "@/lib/constants";
import Post from "./post";
import {db} from "@/lib/db";
// import {motion} from "framer-motion";
// import {motion} from "motion/react";


const Feed = async () => {
    // const res = await fetch(`${BACKEND_BATH_URL}/posts`)
    // const data = await res.json();
    const posts = await db.post.findMany({
        orderBy: {
            // 根据创建时间降序, 后发的排在前面
            createdAt: 'desc',
        }
    })

    return (
        <div
            className={'xl:ml-[370px] border-l border-r border-gray-200 xl:min-w-[576px] ' +
                // `sm:ml-[73px] flex-grow max-w-xl`}
                `sm:ml-[73px] flex-grow max-w-3xl`}
        >
            <div className={'flex py-2 px-3 sticky top-0 z-50 bg-white border-b border-gray-200'}>
                <h2 className={'text-lg sm:text-xl font-bold cursor-pointer'}>Home</h2>
                <div className={`hoverEffect flex justify-center items-center px-0 ml-auto size-9`}>
                    <SparklesIcon className={'size-5'}/>
                </div>
            </div>
            <Input/>
            {/*<AnimatePresence>*/}
            {posts.map((post) => (
                // <motion.div
                //     key={post.id}
                //     initial={{opacity: 0}}
                //     animate={{opacity: 1}}
                //     exit={{opacity: 0}}
                //     transition={{duration: 1}}
                // >
                <Post
                    key={post.id}
                    post={post}/>
                // </motion.div>
            ))}
            {/*</AnimatePresence>*/}
        </div>
    );
};

export default Feed;